<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>
	<style>
		canvas{
			display:block;
			margin:10px auto;
			border:1px solid #ccc;
		}
	</style>
	<body>
		<canvas width="600" height="600">
		 请更新浏览器
		</canvas>
		<script type="text/javascript">
		  var cas=document.querySelector("canvas")
		  console.log(cas)
		  var ctx=cas.getContext("2d")
		  
		  ctx.beginPath()
		  ctx.moveTo(100,100)
		  ctx.lineTo(100,400)	
          ctx.lineTo(400,400)
		  ctx.lineWidth=4;
		  ctx.stroke();
		  ctx.closePath()
		  for(var i=0;i<5;i++){
			 var num= Math.random().toFixed(2)*300
			 console.log("保留两位小数",num)
			  var random=parseInt(Math.random().toFixed(2)*300)
			  console.log("上面",random)
			  ctx.fillStyle="#"+parseInt(Math.random()*0xffffff).toString(16)
			  console.log(1-random)
			  ctx.fillRect(120+60*i,398-random,20,random)
		  }   
		</script>
	</body>

</html>
